<template>
  <div class="space-y-6">
    <div class="flex justify-between items-center">
      <div>
        <h1 class="text-3xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
          地狱管理
        </h1>
        <div class="text-sm breadcrumbs mt-1">
          <ul>
            <li><a @click="router.push('/')">首页</a></li>
            <li>地狱管理</li>
          </ul>
        </div>
      </div>
      <button class="btn btn-primary gap-2" @click="router.push('/hell/new')">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
        </svg>
        新增惩罚
      </button>
    </div>

    <!-- 地狱概览 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div class="stats shadow">
        <div class="stat">
          <div class="stat-title">总受刑魂魄</div>
          <div class="stat-value">1,284</div>
          <div class="stat-desc">较上月 ↗︎ 124 (14%)</div>
        </div>
      </div>

      <div class="stats shadow">
        <div class="stat">
          <div class="stat-title">本月新增</div>
          <div class="stat-value text-primary">156</div>
          <div class="stat-desc">较上月 ↘︎ 23 (12%)</div>
        </div>
      </div>

      <div class="stats shadow">
        <div class="stat">
          <div class="stat-title">刑期已满</div>
          <div class="stat-value text-success">45</div>
          <div class="stat-desc">待处理转世</div>
        </div>
      </div>

      <div class="stats shadow">
        <div class="stat">
          <div class="stat-title">地狱容量</div>
          <div class="stat-value text-warning">86%</div>
          <div class="stat-desc">接近饱和</div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div class="form-control">
            <label class="label">
              <span class="label-text font-medium">搜索</span>
            </label>
            <div class="relative">
              <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-base-content/50">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                </svg>
              </span>
              <input
                type="text"
                v-model="searchQuery"
                placeholder="搜索魂魄姓名或罪名"
                class="input input-bordered w-full pl-10"
              />
            </div>
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text font-medium">状态</span>
            </label>
            <select v-model="filterStatus" class="select select-bordered w-full">
              <option value="">全部状态</option>
              <option value="pending">待执行</option>
              <option value="processing">执行中</option>
              <option value="completed">已完成</option>
            </select>
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text font-medium">地狱层数</span>
            </label>
            <select v-model="filterLevel" class="select select-bordered w-full">
              <option value="">全部层数</option>
              <option v-for="i in 18" :key="i" :value="i">第{{ i }}层</option>
            </select>
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text font-medium">排序</span>
            </label>
            <select v-model="sortBy" class="select select-bordered w-full">
              <option value="time">执行时间</option>
              <option value="name">魂魄姓名</option>
              <option value="level">地狱层数</option>
              <option value="status">状态</option>
            </select>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <div class="overflow-x-auto">
          <table class="table table-zebra">
            <thead>
              <tr>
                <th class="w-16">
                  <label>
                    <input type="checkbox" class="checkbox" />
                  </label>
                </th>
                <th>魂魄姓名</th>
                <th>罪名</th>
                <th>地狱层数</th>
                <th>执行时间</th>
                <th>刑期</th>
                <th>状态</th>
                <th class="w-24">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in filteredItems" :key="item.id" class="hover">
                <td>
                  <label>
                    <input type="checkbox" class="checkbox" />
                  </label>
                </td>
                <td class="font-medium">{{ item.soulName }}</td>
                <td>{{ item.crime }}</td>
                <td>
                  <div class="badge badge-error">第{{ item.level }}层</div>
                </td>
                <td>{{ formatDate(item.executionTime) }}</td>
                <td>{{ item.duration }}年</td>
                <td>
                  <div class="badge" :class="getStatusBadgeClass(item.status)">
                    <span v-if="item.status === 'processing'" class="w-2 h-2 rounded-full bg-current animate-pulse mr-1"></span>
                    <span v-else class="w-2 h-2 rounded-full bg-current mr-1"></span>
                    {{ getStatusLabel(item.status) }}
                  </div>
                </td>
                <td>
                  <div class="flex gap-2">
                    <button class="btn btn-ghost btn-sm btn-square" @click="viewDetails(item)">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                        <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
                      </svg>
                    </button>
                    <button class="btn btn-ghost btn-sm btn-square" @click="editItem(item)">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                      </svg>
                    </button>
                    <div class="dropdown dropdown-end">
                      <button tabindex="0" class="btn btn-ghost btn-sm btn-square">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                          <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
                        </svg>
                      </button>
                      <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
                        <li><a @click="startExecution(item)">开始执行</a></li>
                        <li><a @click="completeExecution(item)">完成执行</a></li>
                        <li><a @click="cancelExecution(item)" class="text-error">取消执行</a></li>
                      </ul>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 分页 -->
        <div class="flex justify-between items-center mt-4">
          <div class="text-sm text-base-content/60">
            共 {{ totalItems }} 条记录，当前显示 {{ (currentPage - 1) * 10 + 1 }}-{{ Math.min(currentPage * 10, totalItems) }} 条
          </div>
          <div class="join">
            <button
              class="join-item btn btn-sm"
              :class="{ 'btn-disabled': currentPage === 1 }"
              @click="currentPage--"
            >
              «
            </button>
            <button class="join-item btn btn-sm">第 {{ currentPage }} 页</button>
            <button
              class="join-item btn btn-sm"
              :class="{ 'btn-disabled': currentPage === totalPages }"
              @click="currentPage++"
            >
              »
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

interface HellItem {
  id: number
  soulName: string
  crime: string
  level: number
  executionTime: string
  duration: number
  status: 'pending' | 'processing' | 'completed'
}

const router = useRouter()

// 搜索和筛选条件
const searchQuery = ref('')
const filterStatus = ref('')
const filterLevel = ref('')
const sortBy = ref('time')
const currentPage = ref(1)

// 模拟数据
const items = ref<HellItem[]>([
  {
    id: 1,
    soulName: '张三',
    crime: '欺诈',
    level: 2,
    executionTime: '2024-03-09T10:30:00.000Z',
    duration: 10,
    status: 'completed',
  },
  {
    id: 2,
    soulName: '李四',
    crime: '杀人',
    level: 18,
    executionTime: '2024-03-09T11:45:00.000Z',
    duration: 100,
    status: 'processing',
  },
  {
    id: 3,
    soulName: '王五',
    crime: '贪污',
    level: 5,
    executionTime: '2024-03-09T14:20:00.000Z',
    duration: 30,
    status: 'pending',
  },
])

// 计算属性
const filteredItems = computed(() => {
  let result = items.value.filter((item) => {
    const matchesSearch =
      searchQuery.value === '' ||
      item.soulName.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      item.crime.toLowerCase().includes(searchQuery.value.toLowerCase())
    const matchesStatus = filterStatus.value === '' || item.status === filterStatus.value
    const matchesLevel =
      filterLevel.value === '' || item.level === parseInt(filterLevel.value)
    return matchesSearch && matchesStatus && matchesLevel
  })

  // 排序
  result = result.sort((a, b) => {
    switch (sortBy.value) {
      case 'time':
        return new Date(b.executionTime).getTime() - new Date(a.executionTime).getTime()
      case 'name':
        return a.soulName.localeCompare(b.soulName)
      case 'level':
        return b.level - a.level
      case 'status':
        return a.status.localeCompare(b.status)
      default:
        return 0
    }
  })

  return result
})

const totalItems = computed(() => filteredItems.value.length)
const totalPages = computed(() => Math.ceil(totalItems.value / 10))

// 工具函数
const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  })
}

const getStatusBadgeClass = (status: string) => {
  switch (status) {
    case 'pending':
      return 'badge-warning'
    case 'processing':
      return 'badge-info'
    case 'completed':
      return 'badge-success'
    default:
      return ''
  }
}

const getStatusLabel = (status: string) => {
  switch (status) {
    case 'pending':
      return '待执行'
    case 'processing':
      return '执行中'
    case 'completed':
      return '已完成'
    default:
      return status
  }
}

// 操作函数
const viewDetails = (item: HellItem) => {
  router.push(`/hell/${item.id}`)
}

const editItem = (item: HellItem) => {
  router.push(`/hell/${item.id}/edit`)
}

const startExecution = (item: HellItem) => {
  // TODO: 调用API开始执行
  console.log('开始执行:', item)
}

const completeExecution = (item: HellItem) => {
  // TODO: 调用API完成执行
  console.log('完成执行:', item)
}

const cancelExecution = (item: HellItem) => {
  // TODO: 调用API取消执行
  console.log('取消执行:', item)
}
</script>

<style scoped>
.badge {
  @apply px-2 py-1;
}
</style>
